import React, {useState, useEffect} from 'react';
import {Form, Row, Select} from "antd";
import {getAllArea} from "@/axios/apis.ts";
import CycleForm from "@/components/DynamicSearchForm/CycleForm.tsx";

const AddressPart = (props) => {
    let {value, onChange, showArea} = props
    // let [selectForm] = Form.useForm()
    // let [selectForm, setSelectForm] = useState<{}>({
    //     provinceCode: "110000",
    //     cityCode: undefined,
    //     regionCode: undefined
    // })
    const [provinceCode, setProvinceCode] = useState<string | undefined>(undefined)
    const [provinceName, setProvinceName] = useState<string | undefined>(undefined)
    const [cityCode, setCityCode] = useState<string | undefined>(undefined)
    const [cityName, setCityName] = useState<string | undefined>(undefined)
    const [regionCode, setRegionCode] = useState<string | undefined>(undefined)
    const [regionName, setRegionName] = useState<string | undefined>(undefined)
    const getCityList = (areaCode: string) => {
        return getAllArea({areaCode})
    }
    // 获取市/区
    const getLevelCode = (cityCode: string, index: number) => {
        if (!cityCode) return
        getCityList(cityCode).then(res => {
            if (+res.code === 200) {
                const newArray = [...formFields];
                newArray[index].options = res.data
                setFormFields(newArray)
            }
        })
    }
    useEffect(() => {
        getCityList(0).then(res => {
            if (+res.code === 200) {
                const newArray = [...formFields];
                newArray[0].options = res.data
                setFormFields(newArray)
            }
        })
    }, []);
    const getName = (index, code) => {
        return formFields[index].options.find((item: {
            areaCode: string | undefined;
        }) => item.areaCode === code)?.areaName
    }
    const [formFields, setFormFields] = useState([
        {
            name: 'provinceCode',
            onChange: (value: string | undefined) => {
                setProvinceCode(value)
                setCityCode(undefined)
                const newArray = [...formFields];
                newArray[1].options = newArray[2].options = []
                setFormFields(newArray)
                setRegionCode(undefined)
                if (!value) {
                    return
                }
                setProvinceName(getName(0, value))
                getLevelCode(value, 1)
            },
        },
        {
            name: 'cityCode',
            onChange: (value: string | undefined) => {
                setCityCode(value)
                setRegionCode(undefined)
                const newArray = [...formFields];
                newArray[2].options = []
                setFormFields(newArray)
                if (!value) {
                    return
                }
                setCityName(getName(1, value))
                getLevelCode(value, 2)
            },
        },
        {
            name: 'regionCode',
            onChange: (value: string | undefined) => {
                setRegionCode(value)
                if (!value) return
                setRegionName(getName(2, value))
            },
        },
    ])
    const fieldNames = {
        label: 'areaName',
        value: 'areaCode'
    }
    useEffect(() => {
        if (provinceCode === value?.provinceCode) return
        setProvinceCode(value?.provinceCode)
        setProvinceName(value?.provinceName)
        getLevelCode(value?.provinceCode, 1)
        setCityCode(value?.cityCode)
        setCityName(value?.cityName)
        getLevelCode(value?.cityCode, 2)
        setRegionCode(value?.regionCode)
        setRegionName(value?.regionName)
    }, [value])
    useEffect(() => {
        if (showArea){
            if (!provinceCode || !cityCode || !regionCode) return
        }else {
            if (!provinceCode || !cityCode) return
        }
        onChange({
            provinceCode,
            provinceName,
            cityCode,
            cityName,
            regionCode,
            regionName
        })
    }, [provinceCode, cityCode, regionCode])
    return (
        <div className="AddressPart">
            <Select
                placeholder="请选择"
                options={formFields[0].options}
                allowClear
                showSearch
                value={provinceCode}
                onChange={formFields[0].onChange}
                fieldNames={fieldNames}
            />
            <Select
                placeholder="请选择"
                options={formFields[1].options}
                allowClear
                showSearch
                value={cityCode}
                onChange={formFields[1].onChange}
                fieldNames={fieldNames}
            />
            {showArea&&<Select
                placeholder="请选择"
                options={formFields[2].options}
                allowClear
                showSearch
                value={regionCode}
                onChange={formFields[2].onChange}
                fieldNames={fieldNames}
            />}
        </div>
    );
};

export default AddressPart;